<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue CLI 笔记</title>
</head>

<body>
    <h2>所有组件都继承自 vue 的原型</h2>

    <h2>什么是 CLI</h2>
    <ul>
        <li>CLI：Command-Line Interface 通称命令行界面</li>
        <li>是在图形用户界面得到普及之前使用最为广泛的用户界面</li>
        <li>用户通过键盘输入指令，计算机接收到指令后，予以执行</li>
    </ul>

    <h2>什么是 Vue CLI</h2>
    <ul>
        <li>
            官方定义：<br>
            Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
            <ul>
                <li> 通过 @vue/cli 实现的交互式的项目脚手架。 </li>
                <li> 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。 </li>
                <li> 一个运行时依赖 (@vue/cli-service)，该依赖：
                    <ul>
                        <li>可升级；</li>
                        <li>基于 webpack 构建，并带有合理的默认配置；</li>
                        <li>可以通过项目内的配置文件进行配置；</li>
                        <li>可以通过插件进行扩展。</li>
                    </ul>
                </li>
                <li>一个丰富的官方插件集合，集成了前端生态中最好的工具。</li>
                <li>一套完全图形化的创建和管理 Vue.js 项目的用户界面。</li>
            </ul>
        </li>
        <li>是一套使用 Vue.js 构建、开发、管理项目的标准工具</li>
        <li>Vue CLI 4.5以下，对应的是Vue2 </li>
        <li>Vue CLI 4.5及以上，对应的是Vue3，当然，创建项目的时候可以选择Vue2</li>

    </ul>

    <h2>为什么大项目要用 Vue CLI 构建</h2>
    <ul>
        <Li>如果是小型项目或者简单的Demo，不需要用 Vue CLI;</Li>
        <li>如果大型的项目，那么必然要用到 Vue CLI;</li>
        <Li>开发大型应用时，需要考虑到应用配置、代码结构、项目结构和部署、热加载、代码单元测试等事情</Li>
        <li>如果每个项目都要手动完成这些工作，无疑效率会非常低，所以需要借助脚手架 (Vue CLI)来完成这些工作</li>
        <li>
            官方原话： Vue CLI 致力于将 Vue 生态中的工具基础标准化。<br> 它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题</li>
    </ul>

    <h2>Vue CLI （3以上）的使用</h2>
    <ul>
        <li>
            <h4>安装</h4>
            npm install -g @vue/cli <br>
            # OR <br>
            yarn global add @vue/cli
        </li>
        <li>
            <h4>创建项目</h4>
            vue create my-project <br>
        </li>
        <li>
            <h4>以图形化方式创建或配置Vue Cli 3/4 项目</h4>
            vue ui（使用图形化界面创建和管理项目）
        </li>
    </ul>

    <h2>使用2.0模板</h2>
    <ul>
        <li>
            <h4>Vue CLI3 的命令和 vue cli2 相同，因此 vue cli2 的命令被覆盖。
                如果要使用旧版本的 vue init 功能，需要全局安装一个桥接工具</h4>
            npm install -g @vue/cli-init <br>
            vue init webpack my-project -- `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
        </li>
        <li>
            <h4>e2e测试--e2e:end to end</h4>
            <ul>
                <li>安装 NightWatch,是一个利用 selenium 或 webdriver 或 phantomjs 等进行自动化测试的框架</li>
            </ul>
        </li>
    </ul>

    <h2>runtime only vs runtime compiler 的区别</h2>
    <ul>
        <li>runtime compiler ：template->ast->render()->v-dom->真实 dom</li>
        <li>*ast-abstract syntax tree:抽象语法树</li>
        <li>runtime only ：render()->v-dom->真实 dom</li>
        <li>runtime compiler demo 如该目录下的 cli2test,main.js 中有 template的即为 runtime compiler</li>
        <li>runtime only demo 如该目录下的 cli4test,main.js 中没有 template，但有render 函数</li>
        <li>runtime only 性能更高，因为省却了 编译template的过程</li>
    </ul>

    <h2>render 函数</h2>
    <ul>
        <li>传dom：render:function(createEl){return createEl('h2',{class:'box'},['hello',createEl('button','按钮')])}</li>
        <li>传组件：render:createEl=>createEl(Component)}</li>
    </ul>

    <h2>配置相关（cli3&cli4）</h2>
    <ul>
        <li>1，vue ui:使用图形化界面配置项目</li>
        <li>2，通过node_modules\@vue\cli-service\ 这个目录来修改配置，比如 webpack</li>
        <li>3，在项目根目录下手动添加 vue.config.js 该配置文件会自动与其他 webpack 配置文件合并</li>
    </ul>

    <h2>vue.config.js 配置别名(alias)</h2>
    <ul>
        <li>chainWebpack:()=>{</li>
        <li>config.resolve.alias</li>
        <li>.set("@", resolve("src")) </li>
        <li>.set("components", resolve("src/components"))</li>
        <li>.set("assets", resolve("src/assets"))</li>
        <li>}</li>
    </ul>

    <h2>别名的使用</h2>
    <ul>
        <li>import xxx from "@/components/xxx";</li>
        <li>import xxx from "components/xxx";</li>
        <li>src="@/assets/img/xxx.jpg"</li>
        <li>src="~assets/img/xxx.jpg"</li>
    </ul>

</body>

</html>